{extend name="base"}

{block name="main"}
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-col :span="24" >
            <el-button type="primary" size="small" @click="href('{:url('add')}')">发布任务</el-button>
            <el-input v-model="params.keyword" style="width: 250px;" size="small" placeholder="任务标题" clearable></el-input>
            <el-date-picker
                  v-model="params.range"
                  type="daterange"
                  align="right"
                  unlink-panels
                  value-format="timestamp"
                  size="small"
                  range-separator="至"
                  start-placeholder="创建日期"
                  end-placeholder="创建日期"
                  :picker-options="pickerOptions">
            </el-date-picker>
            <el-button type="primary" size="small" @click="search('{:url('')}')">搜索</el-button>
        </el-col>
    </el-row>

    <div class="page">
      <span class="f_r page-total">共<span>{$list->total()}</span>条</span>
      {$list->render()|raw}
    </div>

    <el-table
        :default-expand-all="false"
        border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id"
          :width="80"
          align="center">
        </el-table-column>
        <el-table-column
          label="任务标题"
          prop="title">
        </el-table-column>
        <el-table-column
          label="发布人"
          prop="uname"
          align="center">
        </el-table-column>
        <el-table-column
          label="任务标签"
          prop="tag"
          align="center">
            <template slot-scope="r">
                <el-tag type="success" size="mini" v-if="r.row.tag" v-for="i in getTag(r.row.tag)">{{i}}</template>
                <el-tag type="info" size="mini" v-else>无标签</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="奖励类型"
          prop="type"
          align="center">
            <template slot-scope="r">
                <el-tag type="info" size="mini" v-if="r.row.type==1" style="color: rgb(255, 255, 255);background-color: #f00;">金钱</el-tag>
                <el-tag type="info" size="mini" v-else style="color: rgb(255, 255, 255);background-color: #ffa200;">微豆</el-tag>
            </template>
        </el-table-column>
        
        <el-table-column
          label="奖励"
          prop="reward"
          sortable
          align="center"
          width="110px">
            <template slot-scope="r">
                <template>{{r.row.reward}}<span v-if="r.row.type==1">元</span><span v-else>微豆</span></template>
            </template>
        </el-table-column>
        <el-table-column
          label="审核超时"
          prop="overtime"
          sortable
          align="center">
            <template slot-scope="r">
                <el-tag type="info" size="mini" >{{r.row.overtime}}小时</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="任务数"
          prop="number"
          sortable
          align="center">
        </el-table-column>
        <el-table-column
          label="完成数"
          align="center"
          prop="fquantity"
          sortable
          align="center">
        </el-table-column>
        <el-table-column
          label="发布时间"
          align="center"
          width="140px"
          prop="createtime"
          sortable
          :formatter="dateFormats">
        </el-table-column>
        <el-table-column
          label="开始时间"
          align="center"
          width="140px"
          sortable
          prop="starttime"
          :formatter="dateFormats">
        </el-table-column>
        <el-table-column
          label="截止时间"
          align="center"
          width="140px"
          sortable
          prop="endtime"
          :formatter="dateFormats">
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          width="80px"
          prop="status"
          sortable>
            <template slot-scope="status">
                <el-tag type="success" size="mini" v-if="status.row.status">上架</el-tag>
                <el-tag type="info" size="mini" v-else>下架</el-tag>
            </template>
        </el-table-column>
        
        <el-table-column label="操作" width="170" align="center">
            <template slot-scope="c">
                <el-button v-if="c.row.status" class="ws-mini" type="info" size="mini" @click="close(c.row)">下架</el-button>
                <el-button v-else class="ws-mini" type="primary" size="mini" @click="close(c.row)">上架</el-button>

                <el-button type="success" size="mini" @click="href('{:url('add')}?id='+c.row.id)" class="ws-mini">编辑</el-button>
                <el-button class="ws-mini" type="danger" size="mini" @click="onGet('{:url('delTask')}?id='+c.row.id,true)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="page">{$list->render()|raw}</div>
    
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->append()->toJson()|raw}, // 列表数据
        params:{$params|raw},
        tags:{:json_encode(config('config.weishou_task_tags'))},
    },
    methods:{
        getTag(tag_id){
          if(!tag_id.length){
            return [];
          }
          let tag=tag_id.split(','),
            tags=this.tags;
          tag=tag.map(item=>{
            for(let i of tags){
              if(i.id==item){
                return i.name;
              }
            }
          })
          return tag;
        },
        // 禁用、启用任务
        close(row){
            this._wspost("{:url('close')}",{'id':row.id},res=>{
                if(res.code){
                    row.status=!row.status;
                }
            },false);
        },

    },
});
</script>
{/block}